<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import PreciseFlow from '@/components/post/PreciseFlow.vue'
import BatchFlow from '@/components/post/BatchFlow.vue'
import PreciseLimit from '@/components/post/PreciseLimit.vue'
import BatchLimit from '@/components/post/BatchLimit.vue'

// 当前选中的 tab
const activeTab = ref('precise-flow')

// 投流/限流方式选项
const tabOptions = [
  { label: '精确投流', name: 'precise-flow' },
  { label: '批量投流', name: 'batch-flow' },
  { label: '精确限流', name: 'precise-limit' },
  { label: '批量限流', name: 'batch-limit' }
]

// 热度规则设置
const hotRules = reactive({
  autoIncrement: true,
  incrementInterval: 30, // 分钟
  incrementValue: 1,
  maxHotValue: 1000
})

// 限流相关数据
const limitSettings = reactive({
  maxHot: 500,
  decreaseValue: 10,
  decreaseInterval: 30
})

// 获取帖子列表
const getPosts = () => {
  // TODO: 调用API获取帖子列表
}

// 修改帖子热度
const updateHot = (post, value) => {
  // TODO: 调用API更新帖子热度
  ElMessage.success('热度更新成功')
}

// 重置热度
const resetHot = (post) => {
  // TODO: 调用API重置帖子热度
  ElMessage.success('热度已重置')
}

onMounted(() => {
  getPosts()
})
</script>

<template>
  <div class="post-hot">
    <!-- Tab 栏 -->
    <el-tabs v-model="activeTab" class="flow-tabs">
      <el-tab-pane
        v-for="tab in tabOptions"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
      >
        <!-- 精确投流面板 -->
        <PreciseFlow 
          v-if="activeTab === 'precise-flow'"
          :hot-rules="hotRules"
        />

        <!-- 批量投流面板 -->
        <BatchFlow 
          v-else-if="activeTab === 'batch-flow'"
        />

        <!-- 精确限流面板 -->
        <PreciseLimit 
          v-else-if="activeTab === 'precise-limit'"
          :limit-settings="limitSettings"
        />

        <!-- 批量限流面板 -->
        <BatchLimit 
          v-else-if="activeTab === 'batch-limit'"
          :limit-settings="limitSettings"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.post-hot {
  padding: 20px;
}

.flow-tabs {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.filter-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.rules-section {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-list {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.batch-settings {
  margin-bottom: 20px;
}
</style>